@import'common';

@mixin abs ($top:60px) {
    position: absolute;
    top: $top;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 25px;
    position: absolute;
    transform: translatex(-50%);
    border: $border;
    border-radius: 50%;
    background: #fff;
    margin-right: 5%;
    left: 0;
}

body {

    >div {
        background: #eee;
        width: 100%;
        overflow-x: hidden;

        #bgimg {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translatey(-50%);
            height: 100vh;
            z-index: 10000;
            left: -100%;
            background: url(../img/wolf.png ) no-repeat center center;
            background-size: cover;
        }

    }
}

.show {
    display: flex;
}

.hide {
    display: none;
}

#main {
    overflow-y: auto;
}

.main1 {
    display: none;
    width: 90%;

    >div {
        background: #fff;
        width: 95%;
        border: 2px solid #ccc;
        margin-top: 5px;
        @extend .center2;
    }

    input {
        @extend .center3;
    }

    .div1 {
        height: 40px;
        @extend .center3;
        width: 100%;

        input {
            color: $blue;
        }
    }

    .div2 {
        padding: 25px 0;
        @extend .center2;
        flex-direction: row;
        position: relative;
        display: none;
        width: 100%;

        >div {
            width: 100%;
        }

        .line {
            height: 140px;
            width: 1px;
            background: #ccc;
            margin-left: 10%;
        }

        >div>div {
            position: relative;
        }

        .btn {
            width: 60%;
            padding-left: 10%;
        }

        .btn::before {
            content: '';
            position: absolute;
            left: 14%;
            top: 7px;
            height: 0;
            width: 0;
            border-right: 18px solid $blue;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }

        .btn-click {
            @extend .btn;

            >p {
                background: #93adb3;
            }

            &::before {
                border-right: 18px solid #93adb3;
            }
        }
    }

    .input1 {
        width: 70%;
        display: none;
        padding-left: 15%;
        font-size: 12px;
    }

    .input2 {
        color: $blue;
        font-weight: bold;
    }
}

.a {
    background: #b9e9f5;
    @include abs;

    .s {
        @include abs;
        left: 10%;
        border-top: 10px solid #b9e9f5;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        z-index: 1;
    }
}

.p {
    background: $blue;
    margin: 12px;
    height: 30px;
    width: 125%;
    color: #fff;
    position: relative;
    @extend .size-m;
    @extend .center3;
}

.main {
    &-div {
        width: 351px;
        white-space: normal;

        >div {
            margin: 15px;
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 2px solid #fff;
            position: relative;

            .choose1 {
                @extend .size-m;
                color: #000;
                width: inherit;
                background: #f5c97b;
                height: 70%;
            }

            .choose2 {
                color: #fff;
                width: 15px;
                width: inherit;
                height: 30%;
                background: #83b09a;
            }

            .img {
                height: 15px;
                width: 15px;
                z-index: 100;
                @include abs(85px);
                @extend .center-x;
                visibility: hidden;
            }

            &:hover .img {
                visibility: visible;
            }
        }
    }
}

footer {
    background: #eee;
    width: 100%;
    max-width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;

    >div {
        background: #EEE;
        width: 90%;
    }

    a {
        width: 40%;
        padding: 10px;
        margin: 0 5%;
    }
}